<template>
	<view>
		<view class="wrap">

			<view class="swiper-box" :current="swiperCurrent">
				<view class="swiper-item">
					<view scroll-y style="height: 100%;width: 100%;">
						<view class="page-box">
							<view class="order" v-for="(item, index) in dataList" :key="item.id">

								<!-- 单选按钮 -->
<!-- 								<u-checkbox @change="checkboxChange" v-model="item.shop.checked" shape="circle"
									:name="item.id">
								</u-checkbox> -->
								<view class="left">
									<image :src="item.shop.image[0]" class="ima" @click="goindex(item)"></image>
								</view>
								<view class="content">
									<view class="title u-line-2">{{ item.shop.title }}</view>
									<view class="type">{{ item.shop.desc }}</view>
								</view>
								<view class="right">

									<view class="price">
										￥{{item.shop.total}}
									</view>

									<view class="total">
										<u-icon name="close-circle" size="35" class="icon" @click.stop="del(item.id)">
										</u-icon>
										<button type="default" size="mini"
											@click.stop="jie(item.quantity,item.id)">-</button>
										<view class="evaluate btn" v-model="quantity">{{item.quantity}}</view>
										<button type="default" size="mini"
											@click.stop="sum(item.quantity,item.id)">+</button>
									</view>

									<view class="bottom">
										<view class="evaluate btn"
											@click.stop="gof(item.quantity,item.id,item.shop.price,item.shop_id)">付款
										</view>
									</view>
								</view>

							</view>

						</view>
					</view>
				</view>
			</view>
		</view>

<!-- 		<view class="bottom buttom_fk">
			<view class="">
				合计￥{{Total()}}
			</view>
			<view class="evaluate btn" @click="checkedAll">{{show}}</view>
			<view class="evaluate btn" @click="payment()" >付款</view>
		</view> -->
	</view>
</template>

<script>
	export default {
		data() {
			return {
				show: "全选",
				dataList: [],
				current: 0,
				swiperCurrent: 0,
				tabsHeight: 0,
				dx: 0,
				quantity: 1,
				sp_id: [],
				//选择的商品
				SelectProduct: [],
				arrobj: [],
			};
		},
		onLoad(e) {
			this.getOrderList();
		},
		onShow() {
			this.getOrderList();
		},
		computed: {
			pic() {
				item.shop.price * item.quantity
			},
		},
		methods: {
			Total() {
				let ss=0
				if (this.show == '全选') {
					return 0
				} else {
					console.log(this.arrobj)
					for (let i of this.arrobj) {
						// console.log( i.shop.price)
						// sum.push(i.shop.price)
						//  console.log(sum)
						// return eval(sum.join("+"));
						ss=ss+i.shop.total
						// this.arrobj.push(item)
					}
						return ss
				}
			},
			// payment() {
			// 	//全选付款
			// 	// console.log(shop_id)
			// 	let pri = this.Total()
			// 	console.log(pri)
			// 	uni.navigateTo({
			// 		// url: `../keyboardPay/index?price=${pri}&id=${shop_id}&quantity=${quantity}&gwc=gwc&gwc_id=${id}`
			// 	});
			// 	// this.del(id)
			// 	console.log("付款")
			// },
			goindex(id) {
				console.log(id)
				uni.navigateTo({
					url: `../submitBar/index?title=${id.shop.title}&image=${id.shop.image}&desc=${id.shop.desc}&price=${id.shop.price}&type_id=${id.shop.type_id}&id=${id.shop.id}`
				});
			},
			gof(quantity, id, price, shop_id) {
				console.log(shop_id)
				let pri = quantity * price
				uni.navigateTo({
					url: `../keyboardPay/index?price=${pri}&id=${shop_id}&quantity=${quantity}&gwc=gwc&gwc_id=${id}`
				});
				// this.del(id)
			},

			// 选中某个复选框时，由checkbox时触发
			// checkboxChange(e) {
			// 	//判断全选
			// 	if (e.value) {
			// 		this.show = "全不选"
			// 		this.sp_id.push(e.name)
			// 	} else {
			// 		this.show = "全选"
			// 	}

			// 	console.log('checkboxChange', e);
			// 	console.log('checkboxChange', e.name);


			// 	for (var item of this.dataList) {
			// 		//未选中
			// 		if (e.value == false) {
			// 			// console.log(item.id)
			// 			break;
			// 		}
			// 		//选中添加元素
			// 		if (item.id == e.name) {
			// 			this.arrobj.push(item)
			// 		}

			// 	}
			// 	// console.log(this.arrobj)
			// 	//再次取消选中
			// 	if (e.value == false) {
			// 		for (var index of this.dataList.keys()) {
			// 			this.arrobj.splice(item, index)
			// 		}
			// 	}
			// },
			// // 全选
			// checkedAll(e) {
			// 	// console.log(e);

			// 	if (this.show == "全选") {
			// 		this.show = "全不选"
			// 		this.dataList.map(val => {
			// 			val.shop.checked = true;
			// 			this.arrobj = this.dataList
			// 		})
			// 	} else {
			// 		this.show = "全选"
			// 		this.dataList.map(val => {
			// 			val.shop.checked = false;
			// 			this.arrobj = []
			// 		})
			// 	}
			// },



			async del(id) {
				let {
					data: res
				} = await this.$http(`/shoppingCart/${id}`, "delete", this.vuex_token)
				console.log(res)
				this.getOrderList()
				this.arrobj=[]
			},
			async jie(e, id) {
				this.quantity = e - 1
				console.log(this.quantity)
				if (this.quantity == 0) {
					return uni.showToast({
						title: '数量不能为0',
					});

				}
				let {
					data: res
				} = await this.$http(`/shoppingCart/${id}`, "put", this.vuex_token, {
					quantity: this.quantity
				})
				console.log(res)
				this.getOrderList()
				this.arrobj=[]
			},
			async sum(e, id) {
				this.quantity = e + 1
				let {
					data: res
				} = await this.$http(`/shoppingCart/${id}`, "put", this.vuex_token, {
					quantity: this.quantity
				})
				console.log(res)
				this.getOrderList()
				this.arrobj=[]
			},
			// 页面数据
			async getOrderList(idx) {
				let {
					data: res
				} = await this.$http("/shoppingCart", "get", this.vuex_token, {
					user_id: this.vuex_userid
				})
				res.data.forEach(item => {
					// console.log(item)
					item.shop.image = item.shop.image.split(',')
					item.shop.total = item.shop.price * item.quantity
					item.shop.checked = false
				})
				console.log(res.data)
				this.dataList = res.data;
			},
		}
	};
</script>

<style>
	/* #ifndef H5 */
	page {
		background-color: #f2f2f2;
	}

	/* #endif */
</style>

<style lang="scss" scoped>
	.buttom_fk {
		width: 100%;
		height: 100rpx;
		border-top: 1px solid #ccc;
		position: fixed;
		bottom: 100rpx;
		background-color: #fff;
	}

	.bottom {
		display: flex;
		margin-top: 40rpx;
		padding: 0 10rpx;
		justify-content: flex-end;
		align-items: center;

		.btn {
			line-height: 52rpx;
			width: 160rpx;
			border-radius: 26rpx;
			border: 2rpx solid $u-border-color;
			font-size: 26rpx;
			text-align: center;
			color: $u-type-info-dark;
		}

		.evaluate {
			color: $u-type-warning-dark;
			border-color: $u-type-warning-dark;
		}
	}

	.checkboxgroup {
		margin-right: 0;
		padding-right: 0;
	}

	.icon {
		color: #f29100;
		position: absolute;
		right: -26rpx;
		top: -66rpx;
	}

	.order {
		width: 710rpx;
		background-color: #ffffff;
		margin: 20rpx auto;
		border-radius: 20rpx;
		box-sizing: border-box;
		padding: 20rpx;
		font-size: 28rpx;
		display: flex;
		justify-content: space-between;

		.left {
			margin-left: 0;
			padding-left: 0;

			.ima {
				width: 200rpx !important;
				height: 200rpx !important;
				border-radius: 10rpx;
			}
		}

		.right {
			text-align: center;
		}

		.content {
			width: 150rpx;

			.title {
				width: auto;
				font-size: 28rpx;
				line-height: 50rpx;
			}

			.type {
				margin: 10rpx 0;
				font-size: 24rpx;
				color: $u-tips-color;
			}

			.delivery-time {
				color: #e5d001;
				font-size: 24rpx;
			}
		}


		.decimal {
			font-size: 24rpx;
			margin-top: 4rpx;
		}

		.number {
			color: $u-tips-color;
			font-size: 24rpx;
		}



		.total {
			position: relative;
			display: flex;
			align-items: center;

			button {
				width: 20rpx;
				height: 60rpx;
			}
		}
	}


	.wrap {
		display: flex;
		flex-direction: column;
		height: calc(100vh - var(--window-top));
		width: 100%;
	}

	.swiper-box {
		flex: 1;
	}

	.swiper-item {
		height: 100%;
	}
</style>
